<template>
    <div>
      <!-- 页面头部，显示页面标题 -->
      <Header title="题目分类管理"></Header>
  
      <!-- 操作按钮区域 -->
      <div class="operation-bar">
        <!-- 新增分类按钮 -->
        <el-button type="success" icon="Plus" @click="openAddDialog">新增分类</el-button>
      </div>
  
      <!-- 搜索栏区域：提供分类搜索功能 -->
      <div class="search-bar">
        <!-- 根据分类名称搜索 -->
        <el-input v-model="searchKeyword" placeholder="根据分类名称搜索" clearable @input="searchCategory" />
       
      </div>
  
      <!-- 分类列表表格 -->
      <el-table :data="paginatedCategories" border stripe style="width: 100%" :header-cell-style="{background:'#CFCFCFFF',color:'#000000'}"  >
        <!-- 分类ID -->
        <el-table-column prop="categoryId" label="分类ID" />
        <!-- 分类名称 -->
        <el-table-column prop="categoryName" label="分类名称" />
        <!-- 分类描述 -->
        <el-table-column prop="categoryDescription" label="分类描述" />
        <!-- 创建时间 -->
        <el-table-column prop="createTime" label="创建时间" />
       
        <!-- 操作列 -->
        <el-table-column label="操作">
          <template #default="scope">
            <!-- 编辑按钮 -->
            <el-button type="primary" link icon="Edit" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" link icon="Delete" size="small" @click="confirmDeleteCategory(scope.row.categoryId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页组件 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalCategories"
        />
      </div>
  
      <!-- 新增分类弹窗 -->
      <el-dialog v-model="addDialogVisible" title="新增分类">
        <!-- 新增表单 -->
        <el-form :model="newCategory" label-width="120px">
          <!-- 分类名称 -->
          <el-form-item label="分类名称">
            <el-input v-model="newCategory.categoryName" />
          </el-form-item>
          <!-- 分类描述 -->
          <el-form-item label="分类描述">
            <el-input v-model="newCategory.categoryDescription" type="textarea" />
          </el-form-item>
          <!-- 保存和取消按钮 -->
          <el-form-item>
            <el-button type="primary" @click="saveNewCategory">保存</el-button>
            <el-button @click="addDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
  
      <!-- 编辑分类弹窗 -->
      <el-dialog v-model="editDialogVisible" title="编辑分类">
        <!-- 编辑表单 -->
        <el-form :model="editCategory" label-width="120px">
          <!-- 分类名称 -->
          <el-form-item label="分类名称">
            <el-input v-model="editCategory.categoryName" />
          </el-form-item>
          <!-- 分类描述 -->
          <el-form-item label="分类描述">
            <el-input v-model="editCategory.categoryDescription" type="textarea" />
          </el-form-item>
          <!-- 保存和取消按钮 -->
          <el-form-item>
            <el-button type="primary" @click="saveEditCategory">保存</el-button>
            <el-button @click="editDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue';
  import Header from '@/views/ui/header.vue';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import { getQuestionCategoryListApi, updateQuestionCategoryApi, addQuestionCategoryApi, deleteQuestionCategoryApi } from '@/apis/questionCategoryManager';
  
  // 分类数据列表
  const categories = ref([]);
  // 分类名称搜索关键词
  const searchKeyword = ref('');
  // 分类状态筛选条件
  const statusFilter = ref('');
  // 当前分页页码
  const currentPage = ref(1);
  // 每页显示数量
  const pageSize = ref(10);
  // 分类总数
  const totalCategories = ref(0);
  // 分页后显示的分类数据
  const paginatedCategories = ref([]);
  // 新增分类弹窗是否显示
  const addDialogVisible = ref(false);
  // 新增分类表单数据
  const newCategory = reactive({
    categoryName: '',
    categoryDescription: ''
  });
  // 编辑分类弹窗是否显示
  const editDialogVisible = ref(false);
  // 当前编辑的分类数据
  const editCategory = ref({});
  
  /**
   * 获取分类列表数据
   */
  const fetchCategoryList = async () => {
    try {
      const res = await getQuestionCategoryListApi();
      categories.value = res.data;
      totalCategories.value = categories.value.length;
      applyFiltersAndPagination();
    } catch (error) {
      console.error('获取分类列表失败:', error);
    }
  };
  
  /**
   * 根据搜索条件筛选分类
   */
  const searchCategory = () => {
    applyFiltersAndPagination();
  };
  
  /**
   * 根据分类状态筛选分类
   * @param category 当前分类数据
   * @returns {boolean} 是否匹配筛选条件
   */
  const filterByStatus = (category) => {
    if (statusFilter.value === '') return true;
    return category.isDelete.toString() === statusFilter.value;
  };
  
  /**
   * 应用筛选和分页逻辑
   */
  const applyFiltersAndPagination = () => {
    let filteredCategories = categories.value.filter(category => {
      let nameMatch = false;
      if (category.categoryName) {
        nameMatch = category.categoryName.toLowerCase().includes(searchKeyword.value.toLowerCase());
      }
      const statusMatch = filterByStatus(category);
      return nameMatch && statusMatch;
    });
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    paginatedCategories.value = filteredCategories.slice(start, end);
  };
  
  /**
   * 处理分页每页显示数量变化
   * @param size 新的每页显示数量
   */
  const handleSizeChange = (size) => {
    pageSize.value = size;
    applyFiltersAndPagination();
  };
  
  /**
   * 处理分页当前页码变化
   * @param page 新的当前页码
   */
  const handleCurrentChange = (page) => {
    currentPage.value = page;
    applyFiltersAndPagination();
  };
  
  /**
   * 打开新增分类弹窗
   */
  const openAddDialog = () => {
    newCategory.categoryName = '';
    newCategory.categoryDescription = '';
    addDialogVisible.value = true;
  };
  
  /**
   * 保存新增分类
   */
  const saveNewCategory = async () => {
    try {
      await addQuestionCategoryApi(newCategory);
      ElMessage.success('新增分类成功');
      addDialogVisible.value = false;
      fetchCategoryList();
    } catch (error) {
      ElMessage.error('新增分类失败');
      console.error('新增分类失败:', error);
    }
  };
  
  /**
   * 打开编辑分类弹窗
   * @param category 当前分类数据
   */
  const openEditDialog = (category) => {
    editCategory.value = { ...category };
    editDialogVisible.value = true;
  };
  
  /**
   * 保存编辑后的分类信息
   */
  const saveEditCategory = async () => {
    try {
      await updateQuestionCategoryApi(editCategory.value);
      ElMessage.success('更新分类信息成功');
      editDialogVisible.value = false;
      fetchCategoryList();
    } catch (error) {
      ElMessage.error('更新分类信息失败');
      console.error('更新分类信息失败:', error);
    }
  };
  
  /**
   * 确认删除分类
   * @param categoryId 待删除分类的 ID
   */
  const confirmDeleteCategory = (categoryId) => {
    ElMessageBox.confirm('确定要删除该分类吗？', '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(async () => {
      try {
        await deleteQuestionCategoryApi(categoryId);
        ElMessage.success('删除分类成功');
        fetchCategoryList();
      } catch (error) {
        ElMessage.error('删除分类失败');
        console.error('删除分类失败:', error);
      }
    })
    .catch(() => {
      // 用户取消删除操作
      ElMessage.info('已取消删除');
    });
  };
  
  // 页面加载时获取分类列表
  onMounted(() => {
    fetchCategoryList();
  });
  </script>
  
  <style scoped>
  /* 操作按钮区域样式 */
  .operation-bar {
    margin-bottom: 10px;
  }
  
  /* 搜索栏样式 */
  .search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  /* 分页组件样式 */
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
  </style>